<template>
  <section class="list">
    <div class="nav">
       <img class="search" src="../../../../../assets/images/list/search.jpg"/>
      <input type="text" :placeholder="labelTitle"/>
    </div>
    <div class="left">
      <cube-scroll class="leftPanels">
        <ul>
          <li class="navList "
              v-for="item of listLabel"
              :key="item.id"
              @click="clickNav(item.id)"
              :class="{active : indexNum === item.id}">
            <p>{{item.label}}</p>
          </li>
        </ul>
      </cube-scroll>
    </div>
    <div class="right">
      <cube-scroll class="rightPanels">
        <ul class="right_box">
          <li >
            <h6>{{listContent.labelName}}</h6>
            <ul>
              <li v-for="items of listContent.items" :key="items.id">
                <img v-lazy="items.imgUrl"/>
                <p>{{items.name}}</p>
              </li>
            </ul>
          </li>
        </ul>
      </cube-scroll>
    </div>
  </section>
</template>

<script>
export default {
  name: 'List',
  data () {
    return {
      indexNum: 0,
      listLabel: [],
      listContent: [],
      labelTitle: '笔记本固态硬盘'
    }
  },
  created () {
    this.getListLabel()
    this.getListContent(0)
  },
  mounted () {
    // 让页面可以上下弹动起来
    const leftPanels = document.querySelector('.leftPanels') // 获取元素
    const rightPanels = document.querySelector('.rightPanels') // 获取元素
    const bodyHeight = document.documentElement.clientHeight // 获取可视窗口的高度
    leftPanels.style.height = bodyHeight - 98 + 'px'
    rightPanels.style.height = bodyHeight - 98 + 'px'
  },
  methods: {
    clickNav (id) {
      this.indexNum = id
      this.getListContent(id)
      // let scrollTop = document.getElementsByClassName('navList')[id]
      // // console.log(scrollTop)
    },
    async getListLabel () {
      const result = await this.axios.get('/listDataLabel')
      // console.log(result)
      this.listLabel = result
    },
    async getListContent (id) {
      const result = await this.axios.get('/listDataContent/' + id)
      // console.log(result)
      this.listContent = result
    }
  }
}
</script>

<style lang="stylus" scoped>
  .active
    color #e93b3d!important
    background #ffffff
  .nav
    position fixed
    top 0
    left 0
    z-index 10
    width 100%
    padding 7px 0
    border-bottom 1px solid #e6e6e6
    background #fff
    .search
      position absolute
      top 33%
      left 15.6%
      width 16px
    input
      outline none
      box-sizing border-box
      border-radius 20px
      background #f6f6f6
      font-size 12px
      color #232326
      padding 8px 5px 8px 45px
      width 78%
      margin 0 11%
  .list
    margin-top 46px
    width 100%
    display flex
    text-align center
    .left
      width 23%
      background #f8f8f8
      ul
        li
          line-height 46px
          color #333
          p
            font-size 14px
    .right
      flex 1
      background #fff
      padding 10px
      .right_box
        li
          h6
            text-align left
            font-size 14px
            font-weight 600
            color #333
            margin 10px 0
          ul
            padding 10px
            box-sizing border-box
            display flex
            width 100%
            flex-wrap wrap
            li
              width 33%
              margin-bottom 20px
              img
                width 70px
                height 70px
              p
                font-size 12px
                color #333

</style>
